<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {type DrawerProps,type SelectProps, message} from "ant-design-vue";
import { SmileOutlined } from '@ant-design/icons-vue';
import IconPack from "@/components/utils/icon-pack.vue";
import {Pic, Link, Local} from '@icon-park/vue-next'
import { SignalOne } from "@icon-park/vue-next"
import {io} from "socket.io-client";
//抽屉设置
const open = ref<boolean>(false);
const afterOpenChange = () => {
  // textareaVal.value='' //设置关闭抽屉输入框内容清空
};
const showDrawer = () => {
  open.value = true;
};
const onClose = () => {
  open.value = false;
};
// 模型链接
// 确保这里的地址与你的后端服务器一致
let socket = io('http://127.0.0.1:8889');
// 监听 'response' 事件
//流式数据渲染
let reading = ref("")
//聊天汽包区域
interface DataItem {
  key:string|number
  avatar?:string;
  rule:string;
  message:string;
}
//消息框key设置
let msg_count = 0
//消息存储数组，里面保存对象{key:'',avatar:'',rule:'',message:''}
let msg_arr = ref<Array<DataItem>>([
  {
    key: 0,
    avatar: 'http://localhost:5173/linter/src/views/system/About/image/index01.png',
    rule:'ai',
    message:'你好，请告诉我你的疑问把，我将尽力为你解答'
  },
])
const chatBox = document.getElementById('chatBox');
socket.on('response', (data) => {
  // 获取到返回的数据---进行汽包框处理
  if (data){
    reading.value += data
    msg_arr.value[msg_arr.value.length-1].message += data
    // 自动滚动到聊天记录底部
    if (chatBox)
    chatBox.scrollTop = chatBox.scrollHeight;
  }
});
//模型选择器设置
const selectVal = ref('linter');
const handleChange = (value: string) => {
  selectVal.value = value
};
const selectOptions = ref<SelectProps['options']>([
  {
    label:'linterAI',
    value:'linter',
    key:'linter'
  },
  {
    label:'javaAI',
    value: 'java',
    key:'java'
  },
  {
    label:'最新时事',
    value: '/newAi',
    key:'newAi'
  },
  {
    label:'星火大模型',
    value: '/sparkAi',
    key:'sparkAi'
  }
]);
const handleSummarizeClick = () => {
  message.info("一键总结文章")
  // socket.emit('message',{message: 文章内容, user_ai: selectVal.value})
}
//输入框设置
const textareaVal = ref<string>('');
const handelsendingClick = () => {
  if (textareaVal.value && textareaVal.value!=='\n'){
    msg_arr.value.push({
      key: ++msg_count,
      avatar:'http://localhost:5173/linter/src/views/system/About/image/index01.png',
      rule:'user',
      message: textareaVal.value
    })
    // 发送请求
    socket.emit('message',{message: textareaVal.value, user_ai: selectVal.value})
    textareaVal.value=''
    msg_arr.value.push({
      key: ++msg_count,
      avatar:'http://localhost:5173/linter/src/views/system/About/image/index01.png',
      rule:'ai',
      message: ''
    })
    return
  }
  textareaVal.value = ''
  message.destroy()
  message.info("你还没有输入内容")
}
</script>

<template>
  <div class="ai-icon" v-if="!open" @click="showDrawer">
    <icon-pack :icon="SignalOne" size="24" class="icon-rem"></icon-pack>
  </div>
  <a-drawer
      v-model:open="open"
      width="32rem"
      :body-style="{padding: 0,margin: 0}"
      :root-style="{ color: '#2c313c' }"
      title="Linter AI 智能答疑"
      placement="right"
      @after-open-change="afterOpenChange"
  >
    <div class="scroll bubble" id="chatBox">
      <a-list item-layout="horizontal" class="bubble-list" :split="false" :data-source="msg_arr">
        <template #renderItem="{ item }">
          <a-list-item style="padding: 5px 0">
            <div v-if="item.rule==='ai'" :key="item.key" class="item item-ai">
              <img class="avatar" :src="item.avatar" alt="...">
              <span class="ai-window-content-bubble" v-html="item.message"></span>
            </div>
            <div v-else class="item item-user">
              <span class="user-window-content-bubble">{{ item.message }}</span>
              <img class="avatar" :src="item.avatar" alt="...">
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <template #footer>
      <a-flex justify="flex-start">
        猜你想问：
      </a-flex>
      <a-flex justify="flex-start">
        <a-select
            ref="select"
            v-model:value="selectVal"
            :bordered="false"
            placement="topLeft"
            @change="handleChange"
            :options="selectOptions"
        >
          <template #suffixIcon><smile-outlined class="ant-select-suffix" /></template>
        </a-select>
        <a-button type="link" @click="handleSummarizeClick">一键总结文章</a-button>
      </a-flex>
      <a-textarea
          v-model:value="textareaVal"
          placeholder="请告诉我你的疑问把，我将尽力为你解答"
          :auto-size="{ minRows: 2, maxRows: 5 }"
          show-count :maxlength="1000"
          @pressEnter="handelsendingClick"
      ></a-textarea><br>
      <a-flex justify="space-between" style="margin-top: .5rem">
        <a-space>
          <icon-pack :icon=Pic></icon-pack>
          <icon-pack :icon=Link></icon-pack>
          <icon-pack :icon=Local></icon-pack>
        </a-space>
        <a-button type="primary" @click="handelsendingClick">发送</a-button>
      </a-flex>
    </template>
  </a-drawer>
</template>

<style scoped lang="scss">
.ai-icon{
  position: fixed;
  right: 0;
  bottom: 9rem;
  width: 3.6rem;
  height: 3.6rem;
  background: #fde3cfdd;
  color: #fff;
  z-index: 21;
  border-bottom-left-radius: 1.3rem;
  border-top-left-radius: 1.3rem;
  transition:.12s 0s ease-in all;
  box-sizing: border-box;
  padding-left: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover{
    animation: iconMove 2s linear infinite;
    right:1rem;
    border-radius: 50%;
    background: #f56a00;
    //box-shadow: 10px 15px 20px 1px #2080f0;
    transition:.12s 0s ease-in-out all;
    .icon-rem{
      margin-right: 0.8rem;
    }
  }

}
@keyframes iconMove{
  0%{
    transform: scale(0.9);
  }
  50%{
    transform: scale(1);
  }
  100%{
    transform: scale(0.9);
  }
}

.bubble{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 1rem;
}
.item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  &-ai{
    justify-content: start;
    border-radius: 15px;
  }
  &-user{
    justify-content: end;
  }
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 10px;
}

.ai-window{
  position: relative;
  z-index: 18;
  width: 10rem;
  background: yellow;
}

.ai-window-content-bubble{
  box-sizing: border-box;
  padding: .5rem;
  border:  1px solid #f2f2f2;
  border-radius: 15px;
  margin-bottom: .5rem;
  transition: .24s 0s ease-in all;
  &:hover{
    transition: .24s 0s ease-in all;
    box-shadow: 2px 2px 2px 2px #f2f2f2;
  }
}

.user-window-content-bubble{
  box-sizing: border-box;
  padding: .5rem;
  border:  1px solid #f2f2f2;
  border-radius: 15px;
  margin-bottom: .5rem;
  transition: .24s 0s ease-in all;
  &:hover{
    transition: .24s 0s ease-in all;
    box-shadow: 2px 2px 2px 2px #f2f2f2;
  }
}
</style>